// 表示项目的根组件

// FC表示的是函数组件
import { FC, useState, useMemo, useEffect } from "react";
// import axios from "axios";

import Child from "./Child";

import { Button } from "antd";

interface ItemType {
  id: number;
  name: string;
}

// interface DataItemType {
//   bannerid: string;
//   img: string;
//   // 索引签名，表示其他的属性不重要
//   [propName: string]: any;
// }

const App: FC = () => {
  // useState的类型需要使用泛型的语法
  const [count, setCount] = useState<number>(5);
  // useMemo的类型和useState是一样的
  const doubleCount = useMemo<number>(() => {
    return count * 2;
  }, [count]);

  const [list, setList] = useState<ItemType[]>([
    {
      id: 1,
      name: "zhangsan",
    },
    {
      id: 2,
      name: "lisi",
    },
  ]);

  const [value, setValue] = useState<string>("");

  // const [data, setData] = useState<DataItemType[]>([]);

  // void表示函数没有返回值
  const add = (n: number): void => {
    setCount((v: number) => v + n);
  };

  const minus = (): void => {
    setCount((v: number) => v - 1);
  };

  // 当不知道是什么类型的时候，可以使用any
  const handleChange = (e: any): void => {
    setValue(e.target.value);
  };

  const push = (): void => {
    setList((v) => [...v, { id: new Date().getTime(), name: value }]);
    setValue("");
  };

  // useEffect, useCallback通常不需要加类型
  useEffect((): void => {
    console.log(123);
    // axios
    //   .get("http://121.89.205.189:3000/api/banner/list", {
    //     params: {},
    //   })
    //   .then((res) => {
    //     console.log(res.data.data);
    //     setData(res.data.data);
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   });
  }, []);

  const fn = (n: number): void => {
    console.log(123, n);
  };

  return (
    <>
      <h2>react-ts</h2>
      <button onClick={minus}>-</button>
      <span>{count}</span>
      <button onClick={() => add(2)}>+2</button>
      <button onClick={() => add(3)}>+3</button>

      <div>{doubleCount}</div>

      <hr />

      <input type="text" value={value} onChange={handleChange} />
      <button onClick={push}>添加</button>
      <ul>
        {list.map((item: ItemType) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>

      <hr />

      {/* {data.map((item: DataItemType) => (
        <img src={item.img} alt="" key={item.bannerid} />
      ))} */}

      <hr />

      <Child count={count} onMsg={fn} />

      <hr />

      <Button type="primary">Primary Button</Button>
    </>
  );
};

export default App;
